import React, { PureComponent } from "react"
import { connect } from "react-redux"
import {TourStyle} from "@/components/main/index/section/styled"
import { loadTourrecommendAsync } from "@/components/main/index/actionCreator"
import { Carousel,WingBlank  } from 'antd-mobile';
import {fromJS} from "immutable"


class TourRecommend extends PureComponent {
    constructor(){
        super();
        this.state={
            slideIndex:0
            
        }
    }

    render() {
        // console.log(this.props.tourrecommendData);
        
        return  this.props.tourrecommendData.length !== 0 ? (
            <TourStyle>
                  <div>
                    <p className="title_program">{'巡回演出'}</p>
                </div>
                <WingBlank>
                        <Carousel className="space-carousel"
                            frameOverflow="visible"
                            cellSpacing={10}
                            slideWidth={0.8}
                            autoplay
                            infinite
                            afterChange={index => this.setState({ slideIndex: index })}
                        >
                            {this.props.tourrecommendData.map((val, index) => (
                                <a
                                    key={index}
                                    href={val.get("tour_show_url")}
                                    style={{
                                        display: 'block',
                                        position: 'relative',
                                        top: this.state.slideIndex === index ? -10 : 0,
                                        height: "160px",
                                        boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
                                        
                                    }}
                                >
                                    <img
                                        src={val.get("pic")}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                    />
                                </a>
                            ))}
                        </Carousel>
                        </WingBlank>
                        </TourStyle>
                        ) : (null)
    }
    componentDidMount() {
        this.props.pageInit.bind(this)()
    }
}



const mapStateToProps = (state) => {
    return {
        currentCity: state.getIn(['indexReducer', 'currentCity']).toJS(),
        tourrecommendData: fromJS(state.getIn(["indexReducer", "tourrecommendData"]))

    }
}
const mapDispatchToProps = (dispatch) => ({
   
   
    
    pageInit() {
        let tempid=this.props.currentCity.city_id
        dispatch(loadTourrecommendAsync(dispatch, tempid))
        
    },

})
export default connect(mapStateToProps, mapDispatchToProps)(TourRecommend)



